---
type: tutorial
title: Erstelle dein erstes Astro-Projekt
description: |-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Baue ein neues Projekt für das Astro-Tutorial und mach dich bereit zum Coden
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

<PreCheck>
  - den `create astro` Setup-Assistenten auszuführen, um ein neues Astro-Projekt zu erstellen
  - den Astro-Server im Entwicklungsmodus zu starten
  - dir eine Live-Vorschau deiner Website im Browser anzusehen
</PreCheck>

## Starte den Astro-Setup-Assistenten

Die empfohlene Methode, um ein neues Astro-Projekt zu erstellen, ist über unseren `create astro` Setup-Assistenten.

<Steps>
1. Führe in der Kommandozeile deines Terminals den folgenden Befehl mit deinem bevorzugten Paketmanager aus:
    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # Erstelle ein neues Projekt mit npm
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # Erstelle ein neues Projekt mit pnpm
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # Erstelle ein neues Projekt mit Yarn
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. Gib `y` ein, um `create-astro` zu installieren.
3. Wenn du gefragt wirst, wo das Projekt erstellt werden soll, gib den Namen eines Ordners ein, in dem ein neues Verzeichnis für dein Projekt erstellt werden soll, z. B. `./tutorial`.

    :::note
    Ein neues Astro-Projekt kann nur in einem komplett leeren Ordner erstellt werden. Wähle also einen Namen, der noch nicht existiert!
    :::

4. Du siehst eine kurze Liste von Starter-Vorlagen. Verwende die Pfeiltasten (hoch und runter), um die minimalistische (leere) Vorlage auszuwählen, und drücke dann <kbd>Enter</kbd> (macOS: <kbd>Return</kbd>), um deine Wahl zu bestätigen.

5. Wenn du gefragt wirst, ob die Abhängigkeiten installiert werden sollen, gib `y` ein.

6. Wenn du gefragt wirst, ob ein neues Git-Repository initialisiert werden soll, gib `y` ein.
</Steps>

Wenn der Setup-Assistent abgeschlossen ist, benötigst du dieses Terminal nicht mehr. Du kannst nun VS Code öffnen, um weiterzumachen.

## Öffne dein Projekt in VS Code

<Steps>
7. Öffne VS Code. Du wirst aufgefordert, einen Ordner zu öffnen. Wähle den Ordner, den du während des Setup-Assistenten erstellt hast.

8. Wenn du ein Astro-Projekt zum ersten Mal öffnest, solltest du eine Benachrichtigung sehen, ob du empfohlene Erweiterungen installieren möchtest. Klicke darauf und wähle die [Astro Language Support-Erweiterung](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Sie bietet Syntax-Hervorhebung und automatische Vervollständigungen für deinen Astro-Code.

9. Stelle sicher, dass das Terminal sichtbar ist und dass du die Eingabeaufforderung siehst, z. B.:

    ```sh
    user@machine:~/tutorial$
    ```

    :::tip[Tastenkürzel]
    Um die Sichtbarkeit des Terminals umzuschalten, nutze <kbd>Strg + J</kbd> (macOS: <kbd>Cmd ⌘ + J</kbd>).
    :::
</Steps>

Ab jetzt kannst du anstelle des Terminals deines Computers das im VS Code integrierte Terminal für den Rest des Tutorials verwenden.

## Astro im Entwicklungsmodus starten

Um deine Projektdateien _als Website_ während der Arbeit zu sehen, muss Astro im Entwicklungsmodus laufen.

### Starte den Entwicklungsserver

<Steps>
10. Starte den Astro-Entwicklungsserver, indem du im VS Code-Terminal folgenden Befehl eingibst:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run dev
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm run dev
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run dev
      ```
      </Fragment>
    </PackageManagerTabs>

    Jetzt solltest du im Terminal die Bestätigung sehen, dass Astro im Entwicklungsmodus läuft. 🚀
</Steps>

## Vorschau deiner Website ansehen

Deine Projektdateien enthalten den gesamten Code, um eine Astro-Website darzustellen, aber der Browser zeigt deine Seiten an.

<Steps>
11. Klicke auf den `localhost`-Link in deinem Terminal, um eine Live-Vorschau deiner neuen Astro-Website zu sehen!  

    (Astro verwendet standardmäßig `http://localhost:4321`, falls der Port `4321` verfügbar ist.)

    So sollte die Astro-„Empty Project“-Starterseite in der Browser-Vorschau aussehen:

    ![Eine weiße leere Seite mit dem Wort Astro oben.](/tutorial/minimal.png)
</Steps>

:::tip[Astro-Entwicklungsserver verwenden]
Solange der Astro-Server im Entwicklungsmodus läuft, kannst du keine Befehle im Terminal ausführen. Stattdessen erhältst du in diesem Bereich Feedback, während du deine Seite ansiehst.

Du kannst den Entwicklungsserver jederzeit stoppen und zur Eingabeaufforderung zurückkehren, indem du <kbd>Strg + C</kbd> (macOS: <kbd>Control + C</kbd>) im Terminal eingibst.

Manchmal stoppt der Entwicklungsserver während der Arbeit automatisch. Wenn deine Live-Vorschau nicht mehr funktioniert, gehe zurück ins Terminal und starte den Entwicklungsserver erneut mit `npm run dev`.
:::

<Box icon="check-list">
## Checkliste

<Checklist>
- [ ] Ich kann ein neues Astro-Projekt erstellen.
- [ ] Ich kann den Astro-Entwicklungsserver starten.
</Checklist>
</Box>

### Ressourcen

- <p>[Erste Schritte mit Visual Studio Code](https://code.visualstudio.com/docs/introvideos/basics) <Badge class="neutral-badge" text="extern" /> — ein Video-Tutorial zum Installieren, Einrichten und Arbeiten mit VS Code</p>
